<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./react.js"></script>
    <script src="./react-dom.js"></script>
    <script src="./browser.min.js"></script>
    <script src="./jquery.min.js"></script>
</head>
<body>

    <div id="example"></div>


    <script type="text/babel">

        var Test = React.createClass({

            getInitialState : function () {
                return {loading : true, error : null, data : null};
            },
            componentDidMount : function () {
                this.props.promise.then(
                    value => {
                        this.setState({loading: false, data: value});
                        console.log(value);
                    },
                    error => this.setState({loading: false, error: error})
                );
            },



            render : function () {
                if (this.state.loading)
                    return <span>Loading...</span>;
                if (this.state.error)
                    return <span>{this.state.error}</span>;

                var content = this.state.data.items.map(function (item, index) {
                    return (
                        <li key={index}>
                            <a href={item.html_url}>{item.name}</a> ({item.stargazers_count} stars) <br/> {item.description}
                        </li>
                    );
                });

                return (
                    <main>
                        <h1>Most Popular JavaScript Projects in Github</h1>
                        <ol>{content}</ol>
                    </main>
                );
                



            }


        });



        ReactDOM.render(<Test promise={$.getJSON('https://api.github.com/search/repositories?q=javascript&sort=stars')}/>, document.getElementById("example"));

    </script>

</body>
</html>